<template>
<!--  <top-header/>-->
  <div class="container">
    <el-row>
        <el-col :span="24" class="user_top">
              <el-calendar @click="handleDateClick" v-model="value">
              <template #date-cell="{ data }">
                  <div class="cell-content">
                    <label v-html='textContent(data.day)'></label>
                  </div>
              </template>
            </el-calendar>
        </el-col>
    </el-row>
  </div>
    <!-- 底部信息 -->
<!--  <top-bottom/>-->


  <el-dialog v-model="dialog.isshow" title="save" width="500">
    <el-form :model="form">
      <el-form-item label="daytime" :label-width="formLabelWidth">
        <el-input v-model="myplan.id" type="hidden"/>
        <el-input v-model="myplan.daytime" disabled/>
      </el-form-item>
      <el-form-item label="content" :label-width="formLabelWidth">
        <el-input v-model="myplan.content" autocomplete="off" type="textarea"/>
      </el-form-item>
      <el-form-item label="starttime" :label-width="formLabelWidth">
         <el-time-select
          v-model="myplan.starttime"
          style="width: 240px"
          :max-time="myplan.endtime"
          class="mr-4"
          placeholder="Start time"
          start="08:30"
          step="00:15"
          end="18:30"
        />
      </el-form-item>
      <el-form-item label="endtime" :label-width="formLabelWidth">
        <el-time-select
          v-model="myplan.endtime"
          style="width: 240px"
          :min-time="myplan.starttime"
          placeholder="End time"
          start="08:30"
          step="00:15"
          end="18:30"
        />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialog.isshow = false">Cancel</el-button>
        <el-button type="primary" @click="doSubmit()">
          Confirm
        </el-button>
      </div>
    </template>
  </el-dialog>

</template>
<script setup>

import TopHeader from '../components/TopHeader.vue' // 引用Header组件
import TopBottom from '../components/TopBottom.vue' // 引用Header组件
import {
  Link,
  Delete,
  Edit,
  Message,
  Plus,
  Close,
} from '@element-plus/icons-vue'
import { reactive,ref,onMounted} from 'vue'
import { getMyPlanList,deleteMyPlan,saveMyPlan } from '../api/myplan'


const getImageUrl = () => {
  return new URL('../assets/image/del.png', import.meta.url).href;
};
const value = ref(new Date())
const datalist = reactive({
    list:[]
})
const dialog = reactive({
    isshow:false
})
const formLabelWidth = '140px'
const myplan = reactive({
    id:null,
    content:'',
    daytime:'',
    starttime:'',
    endtime:''
})

function accumulateValues(arr) {
  const cache = [];
  arr.forEach(item => {
    var item2 = isexist(cache,item.daytime);
    if (item2 === null || item2 === undefined)
    {
      var t1 = { day: item.daytime, value: item.content +"<a href='javascript:void(0);' onclick='doDelete("+item.id+",event)'><img src='"+getImageUrl()+"'/></a>" }
      cache.push(t1)
    }
    else
    {
      item2.value += "</br>"+item.content +"<a href='javascript:void(0);' onclick='doDelete("+item.id+",event)'><img src='"+getImageUrl()+"'/></a>"
    }
  });
  return cache;
}

function isexist(arr, day) {
  for (var i=0;i<arr.length;i++)
  {
      var item = arr[i];
        if (item.day == day) {
    	return item;
    	}
  }
  return null;
}

function doDelete(id,event) {
  event.stopPropagation();
  deleteMyPlan({id:id}).then((res) => {
    if (res.code == 200)
    {
      loaddata();
    }
  })
}
function doSubmit()
{
  dialog.isshow = false
  saveMyPlan(myplan).then((res) => {
    if (res.code == 200)
    {
      //更新下视图数据
      loaddata();
    }
  })
}
// 转换时间
const formatTime = (time) => {
	//将中国标准时间转化为yyyy-mm-dd h:m:s
	const date = new Date(time);
	var year = date.getFullYear();
	/* 在日期格式中，月份是从0开始的，因此要加0
	 * 使用三元表达式在小于10的前面加0，以达到格式统一  如 09:11:05
	 * */
	var month = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1;
	var day = date.getDate() < 10 ? '0' + date.getDate() : date.getDate();
	//var hours = date.getHours() < 10 ? '0' + date.getHours() : date.getHours();
	//var minutes = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes();
	//var seconds = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds();
	// 拼接
	return year + '-' + month + '-' + day;// + ' ' + hours + ':' + minutes + ':' + seconds;
};
function handleDateClick(event,date) {

  if (event.target.classList.contains('cell-content'))
  {

  dialog.isshow = true
  myplan.id=null
  myplan.content=''
  myplan.starttime=''
  myplan.endtime=''
  myplan.daytime = formatTime(value.value);//value.value.getFullYear()+"-"+value.value.getMonth()+"-"+value.value.getDay()
    //console.log(value.value.getDate());
  }
  else
  {

  }

}
const textContent = (date) => {

    for (let i = 0; i < datalist.list.length; i++) {
         if (date == datalist.list[i].day)
        {
          return date.split('-').slice(1).join('-') +"</br>" + datalist.list[i].value;
        }
    }
    return date.split('-').slice(1).join('-');
};

onMounted(() => {
  window.doDelete = doDelete;
  loaddata();
})

function loaddata()
{
  getMyPlanList().then((res) => {
    if (res.code == 200)
    {
      datalist.list = accumulateValues(res.data);
    }
  })
}

</script>
<style lang="less" scoped>
/* 深色模式下调整current日期样式 */
@media (prefers-color-scheme: dark) {
  /* 普通current日期的字体颜色 */
  .el-calendar-table td.current .el-calendar-day,
  .el-calendar-table td.current .el-calendar-day .cell-content label {
    color: #000000 !important; /* 使用浅灰色，比纯白稍暗 */
  }

  /* 今天且被选中的特殊样式 */
  .el-calendar-table td.current.is-selected.is-today .el-calendar-day,
  .el-calendar-table td.current.is-selected.is-today .el-calendar-day .cell-content label {
    color: #ffffff !important; /* 保持选中状态的白色 */
    background-color: #409EFF; /* Element UI默认选中蓝色 */
  }

  /* 非选中状态的今天日期 */
  .el-calendar-table td.current.is-today:not(.is-selected) .el-calendar-day,
  .el-calendar-table td.current.is-today:not(.is-selected) .el-calendar-day .cell-content label {
    color: #409EFF !important; /* 使用主题蓝色突出今天 */
  }

  /* 删除图标颜色调整 */
  .el-calendar-table td.current .el-calendar-day img {
    filter: invert(90%); /* 使删除图标在深色背景下可见 */
  }
}

.user_top{
    text-align:center;
    margin-top: 20px;
    padding: 20px;
}

/* 覆盖日历的背景色 */
// .el-calendar .el-calendar__body {
//   background-color: #f0f2f5; /* 你想要的背景颜色 */
// }
.cell-content{
  min-height: 60px;
}
.el-calendar {
  --el-calendar-cell-width:  auto;
}
.delete_right {
    display: block;
    cursor: pointer;
    width: 120px;
    height: 120px;
    background: red;
    position: absolute;
    // top: 22px;
    // right: 30px;
    background: url('src/assets/image/user.png') -48px -96px no-repeat;
}
.error {
  width: 28px;
  height: 28px;
  line-height: 26px;
  border: 1px solid #025299;
  background-color: #025299;
  position: relative;
  cursor: pointer;
}

.error::before,
.error::after {
  content: "";
  position: absolute;
  height: 18px;
  width: 2px;
  top: 5px;
  left: 12px;
  background: #fff;
}
.error::before {
  transform: rotate(45deg);
}
.error::after {
  transform: rotate(-45deg);
}
</style>
